<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <title>Document</title>
    <style>
       
        .biandan{
            width: 400px;

        }
        p#txt{
            width: 10%;
            height: 50px;
            color:#000;
            border:1px solid #000;
        }
    </style>
</head>
<body onload=startTime()>
        <!-- 1.使用字符串对象将字符串 “马小腾，马小腾”  马小腾替换成huge
        2. 声明一个函数，用来识别当前页面所在的浏览器是什么浏览器。
        如果是IE6、IE7，那么就让当前页面跳转到 	http://www.baidu.com/s?wd=谷歌浏览器
        3. 声明一个函数，实现两个文本输入框内容的加减乘除运算。
        4. 实现点击链接3秒后跳转到http://wengdo.com
        5. 声明一个函数，获取当前时间, 找两个项目，在头部输出动态的时钟
        6. 使用bootstrap写课件里面的表单，给表单做js单条和全部验证
         -->
    <a href="index.html" ></a>
        
    <div class="text-center "><a href="javascript:;" id="lianjian">点击3秒跳转文豆</a></div> 
    
    <form action="" name="form1" onsubmit="return validate()">
        <div class="container">
            <div class="row">
                    <input type="text" class="col-md-4" placeholder="请输入数字" name="input1">
                    <input type="text" class="col-md-4" placeholder="运算符号" name="input2">
                    <input type="text" class="col-md-4" placeholder="请输入数字" name="input3">
                    
            </div>
                <div class="row">      
                        <input type="submit" value="运算" class="form-control" name="input4"> 
                </div>
              <div class="row">
                  <p id="jieguo"></p>
              </div>
        </div>
    </form>
    <p id="txt"  ></p>
    <form action="" class="jianjie" name="jianjie"  onsubmit="return validate()">
            <div class="biaodan" style="margin: 0;padding: 0;">
                <div class="row">
                    <div class="col-md-12">
                        <div class="col-md-2">
                            <p class="pull-right"> 用户名：</p>
                        </div>
                        <div class="col-md-5"><input type="text" name="uname2" id="uname2">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="col-md-2">
                            <p class="pull-right"> 密码：</p>
                        </div>
                        <div class="col-md-5">
                            <input type="text" name="pwd2" id="pwd">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="col-md-2">
                            <p class="pull-right"> 性别：</p>
                        </div>
                        <div class="col-md-5">
                            <input id="boy" type="radio" name="sex" value="1" id="man"><label for="boy">男</label>
                            <input id="girl" type="radio" name="sex" value="0" id="woman"><label for="girl">女</label>
    
                        </div>
                    </div>
    
                    <div class="col-md-12">
                        <div class="col-md-2">
                            <p class="pull-right"> 爱好：</p>
                        </div>
                        <div class="col-md-5">
                            <input type="checkbox" id="pingguo" name="fruit" value="1"><label for="pingguo">芒果</label>
                            <input type="checkbox" id="xueli" name="fruit" value="2"><label for="xueli">苹果</label>
                            <input type="checkbox" id="xiangjiao" name="fruit" value="3"><label for="xiangjiao">香蕉</label>
                            <input type="checkbox" id="shuimitao" name="fruit" value="4"><label for="shuimitao">水蜜桃</label>
                        </div>
                    </div>
    
    
                    <div class="col-md-12">
                        <div class="col-md-2">
                            <p class="pull-right"> 城市：</p>
                        </div>
                        <div class="col-md-5">
                            <select name="city" id="city">
                                <option value="guangzhou">广州</option>
                                <option value="shantou">汕头</option>
                            </select>
                        </div>
                    </div>
    
                    <div class="col-md-12">
                        <div class="col-md-2">
                            <p class="pull-right"> 上传头像：</p>
                        </div>
                        <div class="col-md-5">
                            <input type="file" name="photo">
                        </div>
                    </div>
    
                    <div class="col-md-12">
                        <div class="col-md-2">
                            <p class="pull-right"> 个人简介：</p>
                        </div>
                        <div class="col-md-5">
                            <textarea name="self" cols="30" rows="3" id="textarea"></textarea>
                        </div>
                    </div>
    
                    <div class="col-md-12">
                        <div class="col-md-2">
                            <p class="pull-right"> </p>
                        </div>
                        <div class="col-md-5">
                            <input type="submit" value="提交" >
                        </div>
                    </div>
    
                </div>
            </div>
        </form>
    
        <!-- 1.使用字符串对象将字符串 “马小腾，马小腾”  马小腾替换成huge
        2. 声明一个函数，用来识别当前页面所在的浏览器是什么浏览器。
        如果是IE6、IE7，那么就让当前页面跳转到 	http://www.baidu.com/s?wd=谷歌浏览器
        3. 声明一个函数，实现两个文本输入框内容的加减乘除运算。
        4. 实现点击链接3秒后跳转到http://wengdo.com  
        5. 声明一个函数，获取当前时间, 找两个项目，在头部输出动态的时钟
        6. 使用bootstrap写课件里面的表单，给表单做js单条和全部验证 -->
        <script>
            // 第一题
            var str="马小腾,马小腾";
            console.log(str.replace(/马小腾/g,"huge"));
            // 第二题
            // var info =navigator.userAgent;
            // function brow(){
            // if(info.search(/Chrome/)!=-1){
            //     alert('您使用的是谷歌浏览器')
            // }else if(info.search(/Firefox/)){
            //     alert('您使用的是火狐浏览器')
            //  }
            // }
            // brow();
            function checkBrowser() {
                var u_agent = navigator.userAgent;
                var browser_name = 'Failed to identify the browser';
                if (u_agent.indexOf('Firefox') > -1) {
                    browser_name = 'Firefox';
                } else if (u_agent.indexOf('Chrome') > -1) {
                    browser_name = 'Chrome';
                } else if (u_agent.indexOf('Trident') > -1 && u_agent.indexOf('rv:11') > -1) {
                    browser_name = 'IE11';
                } else if (u_agent.indexOf('MSIE') > -1 && u_agent.indexOf('Trident') > -1) {
                    browser_name = 'IE(8-10)';
                } else if (u_agent.indexOf('MSIE') > -1) {
                    browser_name = 'IE(6-7)';
                    location.href = "http://www.baidu.com/s?wd=谷歌浏览器";
                } else if (u_agent.indexOf('Opera') > -1) {
                    browser_name = 'Opera';
                } else {
                    browser_name += ',info:' + u_agent;
                }
                document.write('当前页面所在浏览器为' + browser_name)
            }
            checkBrowser()

    //    第三题
    var jieguo=document.getElementById("jieguo");
    var sum="";
    var jian="";
    var cheng="";
    var chu="";
    var form1 = document.forms['form1'];
    var el = form1.elements;
    var input1=el['input1'];
    var input2=el['input2'];
    var input3=el['input3'];
    var input4=el['input4'];
    //是否为空
    
       input1.onblur=function(){
			if(  input1.value == '' ) {
				alert('不能为空')
			}
            return null
    }
   input2.onblur=function(){
			if( input2.value == '' ) {
				alert('不能为空')
			}
            return null
    }
    input3.onblur=function(){
			if( input3.value == '' ) {
				alert('不能为空')
			}
            return null
    }
    input4.onclick=function(){
       sum=parseFloat(input1.value)+input3.value+parseFloat(input3.value);
       console.log(sum);
    }
    console.log(sum);
            // 第四题
            var lianjian=document.getElementById("lianjian");
            console.log(lianjian);
            lianjian.onclick=function(){              
               var t=setTimeout(function(){
                    window.open("http://wengdo.com","_self")
                    },3000);
            }
            // 第四题结束
            // 第五题
            function startTime() {
                var today = new Date()
                var h = today.getHours()
                var m = today.getMinutes()
                var s = today.getSeconds()
                // add a zero in front of numbers<10
                m = checkTime(m)
                s = checkTime(s)
                document.getElementById('txt').innerHTML = h + ":" + m + ":" + s;
                t = setTimeout('startTime()', 500)
            }
            function checkTime(i) {
                if (i < 10) {
                    i = "0" + i
                }
                return i
            }
            

            // 第五题结束
        //   最后一题
    var name2=document.getElementById("uname2");
    var pwd=document.getElementById("pwd");
    var form2=document.forms["jianjie"];
    var el2=form2.elements;
    var sex=el2['sex'];
    var city=el2['city'];
    var self=el2['self'];
    var fruit=el2['fruit'];
    name2.onblur=function(){
			if( name2.value == '' ) {
				alert('用户名不能为空')
			}
            return null
    }
    pwd.onblur=function(){
			if( pwd.value == '' ) {
				alert('密码不能为空')
			}
            return null
    }
    // city.onblur=function(){
	// 		if( city.value == '' ) {
	// 			alert('城市不能为空')
	// 		}
    //         return null
    // }
    self.onblur=function(){
			if( self.value == '' ) {
				alert('内容不能为空')
			}
            return null
    }
    // 整个表单验证
    function validate () {

			if( name2.value == '' ) {
				alert('用户名不能为空')
				return false;
			}

			if( pwd.value == '' ) {
				alert('密码不能为空')
				return false;
			}

			if( !/[a-zA-Z0-9]{6,}/.test(pwd.value) ) {
				alert('密码至少为6位数以上...')
				return false;
			}
            if(sex.value == ''){
                alert('性别不能为空')
                return false;
            }
			if( city.value == "") {
				alert('请选择您的所在地...')
				return false;
			}           
			return true;
		}

    

   

             
        </script>
         <script type="text/javascript" src="../js/jquery.js"></script>
         <script type="text/javascript" src="../js/bootstrap.js"></script>
</body>
</html>